import React, { Component } from 'react';

import { caesar } from './caesar.js'

import './css/App.css'

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            message: 'Hier Text zum Verschlüsseln eingeben!',
            encryption: "TUQDFQJFLGYHQDEOTXLEEQXZQUZSQNQZ",
            shift: 13,
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSlider = this.handleSlider.bind(this);
        this.encrypt = this.encrypt.bind(this);


    };
    
// Handle change!!! -> React verhält sich wie ein DOM, deswegen benötigt man das
handleChange(event){
    this.setState({message: event.target.value}, this.encrypt);
}

handleSlider(event){
    this.setState({shift: Number.parseInt(event.target.value)}, this.encrypt); // !!! callback
}

encrypt() {
    const encryption = caesar(this.state.message, this.state.shift);
    this.setState({encryption: encryption});
}


render() {
        return (
            <div>
                <h1>Caesar Code</h1>

                <textarea 
                onChange = {this.handleChange}
                value = {this.state.message} />
    
                <input onChange={this.handleSlider} type="range" min="0" max="25" value={this.state.shift} />
                <p>{this.state.shift}</p>

                <pre>
                    <code>{this.state.encryption}</code>
                </pre>
            </div>
        );
    }
}